<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../scripts/jquery/2.1.3/jquery.js"></script>
    <script type="text/javascript" src="../scripts/iscroll.js"></script>
    <script type="text/javascript" src="../scripts/navbarscroll.js"></script>
    <script>
        $(document).ready(function() {
            $(".drop-down").hover(function() {
                $('.mega-menu').addClass('display-on');
            });
            $(".drop-down").mouseleave(function() {
                $('.mega-menu').removeClass('display-on');
            });
            $('.wrapper').navbarscroll();
            $('.menu > ul li').click(function () {
                var class1 = $(this).attr('class');
                console.log(class1);
                if(class1.indexOf('all')!=-1){
                    return;
                }
                $('.menu > ul li').removeClass('active');
                $(this).addClass('active');
                var clss = class1.split(" ");
                var cls = "";
                for(var i=0,len=clss.length;i<len;i++){
                     if(clss[i]!="active"){
                         cls = clss[i];
                         break;
                     }
                }
                $(".content-" + cls).show().siblings().hide();
            });
            $('.categories-list div').click(function (e) {
                var class1 = $(this).attr('class').substr(4);
                console.log(class1);
                $('.mega-menu').removeClass('display-on');
                $('.'+class1,$('.menu > ul')).click();
            });
//            $('.menu .baseinfo').click();
            $('.menu .li1').click();
        });
    </script>
    <style>
        *{
            margin: 0;
            padding: 0;
            border: 0;
            font-size: 100%;
            vertical-align: middle;
        }
        *, *:before, *:after {
            box-sizing: border-box;
        }
        body {
            font-family: 'Sintony', sans-serif;
            color: #e5e5e5;
            font-size: 12px;
            background: #bfbfbf;
            line-height: 1;
        }
        .order .clearfix:after{
            content:".";
            display:block;
            height:0;
            clear: both;
            visibility:hidden;
        }
        .order .clearfix{
            *zoom:1;
        }
        .order .menu {
            background:#e5e5e5;
            position: absolute;
            min-height: 45px;
            height: 45px;
            width: 1000px;
        }
        .order .content{
            position: absolute;
            top: 45px;
            width: 1000px;
            background: #fff;
           bottom: 0;
        }
        ol, ul {
            list-style: none;
        }
        a:hover{text-decoration:none}
        a{text-decoration:none}
        .mega-menu {
            background: none repeat scroll 0 0 #888;
            /*left: 0;*/
            /*width: 100%;*/
            right: 0;
            margin-top: 0px;
            position: absolute;
            width: 500px;
            padding: 10px;
            display: none;
            z-index: 1;
        }
         .categories-list span {
            font-size: 18px;
            padding-bottom: 5px;
            text-transform: uppercase;
        }
        .categories-list div {
            display: block;
            line-height: normal;
            padding: 5px 0;
            float: left;
            width: 106px;
            margin: 5px;
            cursor: pointer;
            color: #fff;
        }
        .mega-menu .mega-menu-column {
            width: 100%;
        }
        .mega-menu .mega-menu-column p{
            color: #fff;
            font-size: 16px;
            font-weight: bold;
            padding-left: 5px;
        }
       .display-on{
            display:block;
        }

        .categories-list div:hover{
            background:inherit !important;
        }
         .wrapper {
                position:relative;
                 display: inline-block;
                 height: 45px;
                width: 780px;
                overflow: hidden;
                margin:0 auto;
                background:#ddd
            }
            .wrapper .scroller {
                position:absolute
            }
            .wrapper .scroller li {
                   /*height: 45px;*/
                   color:#333;
                   float: left;
                   line-height: 45px;
                   font-size: 14px;
                   text-align: center;
                 position: relative;
               }
         /*   .wrapper .scroller li a{
              !*  color:#333;*!
                display:block;
                margin:0 10px
            }*/
        .order .menu > ul li:hover {
            /*background: #444;*/
            color: #fff;
            transition-duration: 0.3s;
            -moz-transition-duration: 0.3s;
            -webkit-transition-duration: 0.3s;
        }
        .order .menu > ul > li {
            list-style: none;
            display: inline-block;
            color: black;
            line-height: 45px;
            position: relative;
        }
        .order .menu > ul li a{
            text-decoration: none;
            color: #ffffff;
            display: block;
            /*margin:0 10px;*/
            height:45px;
            padding: 0px 24px;
        }
        .wrapper .scroller li a{
            transition: 0.3s ease;
            background: #3fa46a;
            /*font-size: 20px;*/
            text-decoration: none;
            border-top: 4px solid #3fa46a;
            border-bottom: 4px solid #3fa46a;
            padding: 20px 0;
        }
        .wrapper .scroller li a:hover {
            border-top: 4px solid #ffffff;
            border-bottom: 4px solid #ffffff;
/*            padding: 6px 24px;*/
        }
        .wrapper .scroller li.active a{
            color: #fff !important;
            border-top: 4px solid #ffffff;
            border-bottom: 4px solid #ffffff;
        }
        .active::after {
            position: absolute;
            border-left: 5px solid transparent;
            border-right: 5px solid transparent;
            border-bottom: 7px solid #fff;
            content: " ";
            display: block;
            width: 2px;
            height: 0;
            top: 34px;
            left: 0;
            right: 0;
            margin: auto;
        }
    </style>
</head>
<body>
<div class="order">
        <div class="menu">
            <ul>
                <li class="baseinfo"><a href="#">档案信息</a></li>
                <div class="wrapper" id="sass">
                        <div class="scroller">
                            <ul class="clearfix">
                                <li class='li1'  style="margin-left: 0px; margin-right: 0px;" class=""><a href="javascript:void(0)">合同</a></li>
                                <li class='li2' style="margin-left: 0px; margin-right: 0px;" class=""><a href="javascript:void(0)">发票</a></li>
                                <li class='li3' style="margin-left: 0px; margin-right: 0px;" class=""><a href="javascript:void(0)">文件</a></li>
                                <li class='li4' style="margin-left: 0px; margin-right: 0px;" class=""><a href="javascript:void(0)">表格</a></li>
                                <li class='li5' style="margin-left: 0px; margin-right: 0px;" class=""><a href="javascript:void(0)">财务报表</a></li>
                                <li class='li6' style="margin-left: 0px; margin-right: 0px;" class=""><a href="javascript:void(0)">证书</a></li>
                                <li class='li7' style="margin-left: 0px; margin-right: 0px;" class=""><a href="javascript:void(0)">报告</a></li>
                                <li class='li8' style="margin-left: 0px; margin-right: 0px;" class=""><a href="javascript:void(0)">回执</a></li>
                                <li class='li9' style="margin-left: 0px; margin-right: 0px;" class=""><a href="javascript:void(0)">申请</a></li>
                                <li class='li10' style="margin-left: 0px; margin-right: 0px;" class=""><a href="javascript:void(0)">分析报告</a></li>
                                <li class='li11' style="margin-left: 0px; margin-right: 0px;" class="cur"><a href="javascript:void(0)">招标文案</a></li>
                            </ul>
                        </div>
                </div>
                <li class="drop-down all" style="float:right;"><a href="#">所有分类</a>
                    <div class="mega-menu">
                        <div class="mega-menu-column">
                            <p>所有文档分类</p>
                            <span class="categories-list">
                                    <div class='all-li1'>合同</div>
                                    <div class='all-li2'>发票</div>
                                    <div class='all-li3'>文件</div>
                                    <div class='all-li4'>表格</div>
                                    <div class='all-li5'>财务报表</div>
                                    <div class='all-li6'>证书</div>
                                    <div class='all-li7'>报告</div>
                                    <div class='all-li8'>回执</div>
                                    <div class='all-li9'>申请</div>
                                    <div class='all-li10'>分析报告</div>
                                    <div class='all-li11'>招标文案</div>
                            </span>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
        <div class="content">
            <div class="content-baseinfo">基本信息</div>
            <div class="content-li1">合同</div>
            <div class="content-li2">发票</div>
            <div class="content-li3">文件</div>
            <div class="content-li4">表格</div>
            <div class="content-li5">财务报表</div>
            <div class="content-li6">证书</div>
            <div class="content-li7">报告</div>
            <div class="content-li8">回执</div>
            <div class="content-li9">申请</div>
            <div class="content-li10">分析报告</div>
            <div class="content-li11">招标文案</div>
        </div>
    </div>
</body>
</html>